<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box" style="width: 260px">
					<span class="demonstration" style="margin-left: 10px">品种:</span>
					<el-select v-model="search.productSpec" placeholder="请选择品种" style="width: 210px" filterable>
						<el-option
							v-for="(item, index) in productSpecList"
							:key="index"
							:label="item.name"
							:value="item.name"
						></el-option>
					</el-select>
				</div>
				<div class="panel-search-box">
					<span class="demonstration" style="margin: 0 10px">计划月份:</span>
					<el-date-picker v-model="planCode" type="month" disabled style="width: 150px"></el-date-picker>
				</div>
				<div class="panel-search-box">
					<el-button type="primary" style="width: 100px; margin-left: 10px" @click="upsearch">查询</el-button>
				</div>
			</div>
			<div
				class="right-panel-search"
				style="width: 100%; margin-top: 5px; margin-bottom: 10px; display: flex; align-items: center"
			>
				<el-form
					ref="dialogForm"
					:model="form"
					:rules="rules"
					label-width="120px"
					style="display: flex; flex-wrap: wrap"
				>
					<el-form-item label="库存周转额度:" prop="stock" style="display: flex; margin-right: 15px">
						<el-input
							v-model="form.stock"
							type="number"
							placeholder="请输入周转占比数量"
							style="margin-left: 10px; width: 180px"
							clearable
						></el-input>
					</el-form-item>
					<el-form-item label="增长比例额度:" prop="rate" style="display: flex; margin-right: 15px">
						<el-input
							v-model="form.rate"
							type="number"
							placeholder=" 请输入增长比例数量"
							style="margin-left: 10px; width: 180px"
							clearable
						></el-input>
					</el-form-item>
					<el-form-item label="纯销规模额度:" prop="sale" style="display: flex">
						<el-input
							v-model="form.sale"
							type="number"
							placeholder="请输入纯销占比数量"
							style="margin-left: 10px; width: 180px"
							clearable
						></el-input>
					</el-form-item>
					<el-button type="primary" :loading="isSaveing" style="width: 100px; margin-left: 15px" @click="save"
						>更新配额</el-button
					>
				</el-form>
			</div>
		</div>

		<el-header style="display: none"></el-header>

		<el-main class="nopadding">
			<scTable
				ref="table"
				:apiObj="apiObj"
				:params="params"
				stripe
				remoteSort
				remoteFilter
				hidePagination
				@dataChange="dataChange"
			>
				<el-table-column label="品种" prop="productSpec" align="center"></el-table-column>
				<el-table-column label="区域" prop="area" align="center"></el-table-column>
				<el-table-column :label="`${planCurMonth}月额度`" prop="planNextQuota" align="center"></el-table-column>
				<el-table-column label="其他额度调整（件）" prop="adjustQuota" align="center">
					<template #default="scope">
						<el-input v-model="scope.row.adjustQuota" placeholder="请输入调整件数">
							<template #suffix>
								<el-icon v-show="scope.row.adjustQuota" class="el-dialog__close" @click="changelimit(scope.row)"
									><el-icon-select
								/></el-icon>
							</template>
						</el-input>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			dialog: {
				info: false
			},
			search: {
				productSpec: '' //品种
			},
			apiObj: '',
			productSpecList: [], //品种列表
			params: {
				productSpec: '', //品种
                type:1
			},
			planCode: '', //计划年月
			planCurMonth: '', //计划年月-当月月份
			// importApi: this.$API.activity.file.upload,
			//验证规则
			form: {
				stock: '', //	库存周转额度
				rate: '', //增长比例额度
				sale: '' //纯销规模额度
			},
			rules: {
				stock: [{ required: false, message: '请输入周转占比数量' }],
				rate: [{ required: false, message: '请输入增长比例数量' }],
				sale: [{ required: false, message: '请输入纯销占比数量' }]
			},
			isSaveing: false,
			tableDate: []
		}
	},
	created() {
		this.getProductSpec()
	},
	methods: {
		//获取品种列表
		async getProductSpec() {
			let res = await this.$API.plan.productList2.get()
			this.productSpecList = res.data
			this.params.productSpec = this.search.productSpec = this.productSpecList[0].name
			this.apiObj = this.$API.plan.getPlanByProduct
		},
		dataChange(data) {
			if (data.code == 0 && data.data.length > 0) {
				this.planCode = data.data[0].planCode.toString()
				let month = this.planCode.substring(4)
				this.planLastMonth = Number(month) - 1
				this.planCurMonth = Number(month)
			}
		},
		//其他额度调整
		async changelimit(row) {
			console.log(row)
			await this.$API.plan.otxAdjustOne.post({
				data: {
					id: row.id,
					adjustQuota: row.adjustQuota
				}
			})
			this.$message.success('调整成功')
			this.$refs.table.upData()
		},
		//保存
		async save() {
			console.log(this.form)
			// let valid = await this.$refs.dialogForm.validate().catch(() => {})
			// if (!valid) {
			// 	return false
			// }
			if (!this.form.stock && !this.form.rate && !this.form.sale) {
				this.$message.warning('请至少输入一个额度')
				return
			}
			this.isSaveing = true
			await this.$API.plan.otxAdjustAll.post({
				data: {
					productSpec: this.search.productSpec,
					stock: this.form.stock,
					rate: this.form.rate,
					sale: this.form.sale
				}
			})
			this.$message.success('保存成功')
			this.$refs.table.upData()
			this.isSaveing = false
		},
		//查询
		upsearch() {
			this.$refs.table.upData(this.search)
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}
.el-form-item {
	margin-bottom: 10px;
}
</style>
